<template>
  <HModal @cancel="close" @ok="handleOK" :width="1200" :height="800"
          okText="确定" cancelText="取消"
          title="流程配置" :visible="visible">
    <template slot="title">
      <a-tabs class="flow-design-modal" v-model="active">
        <a-tab-pane key="tab1" tab="基本信息"/>
        <a-tab-pane key="tab2" tab="流程设计"/>
      </a-tabs>
    </template>
    <FormFlowBaseConfig
      :form-definition="formDefinition"
      :flow-model="flowModel"
      v-show="active === 'tab1'"/>
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue';
import {createFlow, createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {createProps} from '@/utils';
import FormFlowBaseConfig from '@comp/hhd/design/FormFlow/FormFlowBaseConfig.vue';
import { FlowEditor } from 'h-flow/dist/h-flow.umd'

export default {
  name: 'FormFlowModal',
  components: {
    FormFlowBaseConfig,
    FlowEditor,
    HModal,
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      flowModel: createFlow(),
      active: 'tab1',
      visible: false,
      request: {
        baseURL: 'window._CONFIG.baseProject',
        headers: {
          'X-Access-Token': 'Vue.ls.get(ACCESS_TOKEN)'
        }
      }
    };
  },
  methods: {
    handleOK() {
      this.visible = false;
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    edit() {

    },
    addNew() {
      this.flowModel = createFlow();
      this.open();
    },
  }
};
</script>
<style>
.flow-design-modal {
  text-align: center;
}
</style>